<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MV 播放</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: black;
            display: flex; /* 使用flexbox布局 */
            flex-direction: column; /* 垂直方向排列 */
            justify-content: center; /* 视频垂直居中 */
            align-items: center; /* 视频水平居中 */
            height: 100vh;
            overflow: hidden;
            position: relative; /* 为定位自定义控制条做准备 */
        }
        video {
            max-width: 100%;
            max-height: 85vh; /* 留出底部空间给控制条 */
            width: auto;
            height: auto;
            object-fit: contain; /* 确保视频内容可见，不被裁剪 */
        }
        .back-button {
            position: absolute;
            top: 20px;
            left: 20px;
            color: white;
            font-size: 1.5em;
            text-decoration: none;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 10px 15px;
            border-radius: 5px;
            z-index: 10;
        }
        .back-button:hover {
            background-color: rgba(0, 0, 0, 0.7);
        }

        /* 自定义控制条样式 */
        .custom-controls {
            position: fixed; /* 固定在视口底部 */
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.8); /* 半透明黑色背景 */
            padding: 10px 20px;
            display: flex; /* 使用flexbox布局内部元素 */
            align-items: center; /* 垂直居中对齐 */
            justify-content: space-between; /* 元素分散对齐 */
            color: white;
            font-family: Arial, sans-serif;
            box-sizing: border-box; /* 包含padding在内的宽度 */
            z-index: 1000; /* 确保在最上层 */
        }

        .custom-controls button {
            background: none;
            border: none;
            color: white;
            font-size: 1.8em; /* 增大图标 */
            cursor: pointer;
            padding: 5px 10px;
            outline: none;
        }
        .custom-controls button:hover {
            color: lightgreen;
        }

        .custom-controls .progress-container {
            flex-grow: 1; /* 占据可用空间 */
            height: 8px;
            background-color: rgba(255, 255, 255, 0.3);
            border-radius: 5px;
            margin: 0 15px;
            cursor: pointer;
            position: relative;
        }

        .custom-controls .progress-bar {
            height: 100%;
            width: 0%; /* 初始宽度为0 */
            background-color: lightgreen;
            border-radius: 5px;
        }

        .custom-controls .time-display {
            font-size: 0.9em;
            width: 100px; /* 固定宽度，防止跳动 */
            text-align: center;
        }

        /* 音量控制 */
        .custom-controls .volume-container {
            display: flex;
            align-items: center;
        }
        .custom-controls .volume-icon {
             font-size: 1.5em; /* 音量图标大小 */
             margin-right: 5px;
             cursor: pointer;
        }
        .custom-controls input[type="range"] {
            -webkit-appearance: none; /* 移除默认样式 */
            width: 80px; /* 宽度 */
            height: 4px; /* 高度 */
            background: rgba(255, 255, 255, 0.3);
            border-radius: 5px;
            outline: none;
            cursor: pointer;
            margin: 0 10px;
        }
        .custom-controls input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: lightgreen;
            cursor: pointer;
        }
        .custom-controls input[type="range"]::-moz-range-thumb {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: lightgreen;
            cursor: pointer;
        }

        .custom-controls .speed-button {
            background: none;
            border: 1px solid white;
            color: white;
            padding: 5px 10px;
            margin-left: 10px;
            border-radius: 3px;
            cursor: pointer;
            font-size: 0.9em;
        }
        .custom-controls .speed-button:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }

    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <a href="index.html" class="back-button">返回播放器</a>
    <video id="mvVideoPlayer" preload="auto"></video> <div class="custom-controls">
        <button class="play-pause-btn"><i class="fas fa-play"></i></button>
        <div class="progress-container">
            <div class="progress-bar"></div>
        </div>
        <span class="time-display">0:00 / 0:00</span>

        <div class="volume-container">
            <button class="volume-icon"><i class="fas fa-volume-up"></i></button>
            <input type="range" class="volume-slider" min="0" max="100" value="100">
        </div>

        <button class="speed-button">1.00X</button>
    </div>

    <script>
        // MV 文件数据（需要和你的主播放器保持一致）
        const mvData = ["music0.mp4", "music1.mp4", "music2.mp4", "music3.mp4"]; // 确保路径对应

        // 获取DOM元素
        const mvVideoPlayer = document.getElementById('mvVideoPlayer');
        const playPauseBtn = document.querySelector('.play-pause-btn');
        const progressBarContainer = document.querySelector('.progress-container');
        const progressBar = document.querySelector('.progress-bar');
        const timeDisplay = document.querySelector('.time-display');
        const volumeIcon = document.querySelector('.volume-icon');
        const volumeSlider = document.querySelector('.volume-slider');
        const speedButton = document.querySelector('.speed-button');

        // 倍速选项和当前倍速索引
        const playbackSpeeds = [1.0, 1.25, 1.5, 2.0, 0.75, 0.5];
        let currentSpeedIndex = 0;

        // 从 URL 获取歌曲 ID 和倍速
        function getMusicIdAndSpeedFromUrl() {
            const params = new URLSearchParams(window.location.search);
            return {
                musicId: parseInt(params.get('musicId')),
                speed: parseFloat(params.get('speed')) || 1.0
            };
        }

        const { musicId: currentMusicId, speed: initialSpeed } = getMusicIdAndSpeedFromUrl();

        // 格式化时间显示
        function formatTime(seconds) {
            if (isNaN(seconds) || seconds < 0) return "00:00";
            const minutes = Math.floor(seconds / 60);
            const remainingSeconds = Math.floor(seconds % 60);
            return `${minutes < 10 ? '0' : ''}${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
        }

        // 初始化视频播放
        if (currentMusicId !== null && !isNaN(currentMusicId) && mvData[currentMusicId]) {
            mvVideoPlayer.src = "mp4/" + mvData[currentMusicId];
            mvVideoPlayer.load();
            mvVideoPlayer.playbackRate = initialSpeed; // 应用从URL传递过来的倍速

            // 找到初始倍速在数组中的索引，以便后续切换
            currentSpeedIndex = playbackSpeeds.indexOf(initialSpeed);
            if (currentSpeedIndex === -1) { // 如果初始倍速不在预设数组中，默认为0 (1.0X)
                currentSpeedIndex = 0;
            }
            speedButton.innerText = initialSpeed.toFixed(2) + "X";


            mvVideoPlayer.play().catch(error => {
                // 如果自动播放被浏览器阻止，需要用户交互才能播放
                console.log("Autoplay prevented:", error);
                playPauseBtn.innerHTML = '<i class="fas fa-play"></i>'; // 确保显示播放图标
            });

            // 监听视频播放结束，可以自动返回主页面
            mvVideoPlayer.onended = function() {
                window.location.href = "index.html";
            };

            // 监听视频元数据加载完成，更新总时间
            mvVideoPlayer.onloadedmetadata = function() {
                timeDisplay.innerText = `00:00 / ${formatTime(mvVideoPlayer.duration)}`;
            };

        } else {
            alert("没有找到对应的MV文件或MV不存在。");
            window.location.href = "index.html";
        }

        // --- 自定义控制条逻辑 ---

        // 播放/暂停按钮
        playPauseBtn.addEventListener('click', () => {
            if (mvVideoPlayer.paused || mvVideoPlayer.ended) {
                mvVideoPlayer.play();
                playPauseBtn.innerHTML = '<i class="fas fa-pause"></i>';
            } else {
                mvVideoPlayer.pause();
                playPauseBtn.innerHTML = '<i class="fas fa-play"></i>';
            }
        });

        // 更新进度条和时间显示
        mvVideoPlayer.addEventListener('timeupdate', () => {
            const progress = (mvVideoPlayer.currentTime / mvVideoPlayer.duration) * 100;
            progressBar.style.width = `${progress}%`;
            timeDisplay.innerText = `${formatTime(mvVideoPlayer.currentTime)} / ${formatTime(mvVideoPlayer.duration)}`;
        });

        // 点击进度条跳转
        progressBarContainer.addEventListener('click', (e) => {
            if (!isNaN(mvVideoPlayer.duration) && isFinite(mvVideoPlayer.duration)) {
                const clickX = e.offsetX;
                const progressBarWidth = progressBarContainer.offsetWidth;
                const newTime = (clickX / progressBarWidth) * mvVideoPlayer.duration;
                mvVideoPlayer.currentTime = newTime;
            }
        });

        // 音量控制
        volumeSlider.value = mvVideoPlayer.volume * 100; // 初始化音量滑块
        volumeSlider.addEventListener('input', () => {
            mvVideoPlayer.volume = volumeSlider.value / 100;
            updateVolumeIcon();
        });

        // 音量图标点击静音/取消静音
        volumeIcon.addEventListener('click', () => {
            mvVideoPlayer.muted = !mvVideoPlayer.muted;
            if (mvVideoPlayer.muted) {
                volumeSlider.value = 0;
            } else {
                volumeSlider.value = mvVideoPlayer.volume * 100; // 恢复到当前音量
            }
            updateVolumeIcon();
        });

        function updateVolumeIcon() {
            if (mvVideoPlayer.muted || mvVideoPlayer.volume === 0) {
                volumeIcon.innerHTML = '<i class="fas fa-volume-mute"></i>';
            } else if (mvVideoPlayer.volume < 0.5) {
                volumeIcon.innerHTML = '<i class="fas fa-volume-down"></i>';
            } else {
                volumeIcon.innerHTML = '<i class="fas fa-volume-up"></i>';
            }
        }
        updateVolumeIcon(); // 初始化图标

        // 倍速按钮
        speedButton.addEventListener('click', () => {
            currentSpeedIndex = (currentSpeedIndex + 1) % playbackSpeeds.length;
            const newSpeed = playbackSpeeds[currentSpeedIndex];
            mvVideoPlayer.playbackRate = newSpeed;
            speedButton.innerText = newSpeed.toFixed(2) + "X";
        });

        // 监听视频暂停/播放事件来更新播放/暂停按钮图标
        mvVideoPlayer.addEventListener('play', () => {
            playPauseBtn.innerHTML = '<i class="fas fa-pause"></i>';
        });

        mvVideoPlayer.addEventListener('pause', () => {
            playPauseBtn.innerHTML = '<i class="fas fa-play"></i>';
        });

    </script>
</body>
</html>